<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>五大联赛智能看球助手管理系统</title>
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/reset.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/site.css">

  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/container.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/grid.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/header.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/image.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/menu.css">

  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/divider.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/segment.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/form.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/input.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/button.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/list.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/message.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/icon.css">

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/form.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.js"></script>

  <style type="text/css">
    body {
      background-color: #DADADA;
    }

    body > .grid {
      height: 100%;
    }

    .image {
      margin-top: -100px;
    }

    .column {
      max-width: 450px;
    }
  </style>
  <script>
    $(document)
            .ready(function () {
              $('.ui.form')
                      .form({
                        fields: {
                          email: {
                            identifier: 'email',
                            rules: [
                              {
                                type: 'empty',
                                prompt: 'Please enter your e-mail'
                              },
                              {
                                type: 'email',
                                prompt: 'Please enter a valid e-mail'
                              }
                            ]
                          },
                          password: {
                            identifier: 'password',
                            rules: [
                              {
                                type: 'empty',
                                prompt: 'Please enter your password'
                              },
                              {
                                type: 'length[6]',
                                prompt: 'Your password must be at least 6 characters'
                              }
                            ]
                          }
                        }
                      })
              ;
            })
    ;
  </script>
</head>
<body>

<div class="ui middle aligned center aligned grid">
  <div class="column">
    <h2 class="ui teal image header">
      <img src="https://wx2.sinaimg.cn/bmiddle/0073ozWdly1gxw1snjs9oj30u00u0q85.jpg" class="image">
      <div class="content">
        Log-in to your account
      </div>
    </h2>
    <form class="ui large form" onsubmit="return false;">
      <div class="ui stacked segment">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input type="text" id="email" name="email" placeholder="E-mail address">
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input type="password" id="password" name="password" placeholder="Password">
          </div>
        </div>
        <div class="ui fluid large teal submit button" id="login">Login</div>
      </div>

      <div class="ui error message"></div>

    </form>

    <div class="ui message">
      New to us? <a href="/registry">Registry</a>
    </div>
  </div>
</div>
<script type="text/javascript" charset="UTF-8">
  //登陆账号
  $("#login").on("click", function () {
    $.ajax({
      url: "/user/login",
      type: "POST",
      data: {
        email: $("#email").val(),
        password: $("#password").val()
      },
      resultType: "JSON",
      success: function (result) {
        alert(result.message);
        if (200 == result.code) {
          window.location.href = "http://localhost:9000/index";
        }
      },
      error: function (result) {
      }
    });
  });
</script>
<style type="text/css">
  body {
    background: url("https://wx1.sinaimg.cn/bmiddle/0073ozWdly1gxw1snrscsj30u00u0n0v.jpg") no-repeat center center fixed;
    /*兼容浏览器版本*/
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
</style>
</body>

</html>